<template>
  <div class="calendar-right-suggestion-box">
    <div class="calendar-right-suggestion">
      <div class="calendar-right-suggestion-suit">
        <i>宜</i>
        <div v-for="(item, index) in suitSuggestion">{{ item }}</div>
      </div>
      <div class="calendar-right-suggestion-avoid">
        <i>忌</i>
        <div v-for="(item, index) in avoidSuggestion">{{ item }}</div>
      </div>
    </div>
    <div class="calendar-right-suggestion-hover">
      <div class="calendar-right-suggestion-hover-suit">
        <i>宜</i>
        <div>
          {{ suitSuggestion.join("、") }}
        </div>
      </div>
      <div class="calendar-right-suggestion-hover-avoid">
        <i>忌</i>
        <div>{{ avoidSuggestion.join("、") }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

let suitSuggestion = ref([
  "结婚",
  "出行",
  "搬家",
  "合婚订婚",
  "搬新房",
  "开业",
  "安葬",
  "求医",
  "治病",
  "迁坟",
]);

let avoidSuggestion = ref(["动土", "破土"]);
</script>

<style>
.calendar-right-suggestion-box {
  position: relative;
  margin-top: 12px;
  padding-top: 12px;
  background: rgba(255, 255, 255, 0.15);
  height: 54%;
}

.calendar-right-suggestion {
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
}

.calendar-right-suggestion-box
  .calendar-right-suggestion:hover
  + .calendar-right-suggestion-hover {
  display: block;
}

.calendar-right-suggestion i {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 auto;
  font-style: normal;
  font-size: 24px;
  color: #fff;
}

.calendar-right-suggestion-suit {
  width: 50%;
  float: left;
}

.calendar-right-suggestion-avoid {
  width: 50%;
  float: right;
}

.calendar-right-suggestion-hover {
  display: none;
  position: absolute;
  z-index: 100;
  width: 190px;
  top: 0;
  right: -230px;
  background: #fff;
  padding: 16px;
  color: #333;
  font-size: 13px;
  border-radius: 6px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.calendar-right-suggestion-hover-suit i,
.calendar-right-suggestion-hover i {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  font-style: normal;
  font-size: 18px;
  background: #4e6ef2;
  border-radius: 6px;
}

.calendar-right-suggestion-hover-avoid i {
  background: #f73131;
}

.calendar-right-suggestion-hover-suit {
  padding-left: 34px;
  position: relative;
  display: block;
  min-height: 30px;
  text-align: left;
}

.calendar-right-suggestion-hover-avoid {
  margin-top: 10px;

  padding-left: 34px;
  position: relative;
  display: block;
  min-height: 30px;
  text-align: left;
}
</style>
